<template>
  <div class="order">
    <my-header></my-header>
    <div style="width: 100%; height: 650px; background-color: #f5f5f5">
      <!--  -->
      <div class="retrieve-password retrieve-password2">
        <div class="w1080">
          <div class="step"></div>
          <div class="public-personal">
            <form action="" method="post">
              <div class="vip-list-con vip-list-cons2 vip-list-con-gl-2">
                <div class="personal-p-title">
                  <h2>请填写以下信息，查询您的订单信息</h2>
                </div>
                <ul>
                  <li>
                    <label for="">
                      <i>*</i>
                      请选择验证身份方式：
                    </label>
                    <select name="type" class="membership-input w370">
                      <option value="1">电子邮箱</option>
                      <option value="2" selected>手机号</option>
                    </select>
                  </li>
                  <li>
                    <label for="">
                      <i>*</i>
                      请输入您的邮箱/手机号：
                    </label>
                    <input
                      type="text"
                      name="value"
                      class="membership-input w370"
                    />
                  </li>
                  <li>
                    <label for="">
                      <i>*</i>
                      请输入右侧图片验证码：
                    </label>
                    <input
                      type="text"
                      name="verify"
                      class="membership-input w370"
                      autocomplete="off"
                    />
                    <img
                      src="http://www.yhachina.com/web-index-verify?0.43953020480892135"
                      alt=""
                      title="点击刷新"
                      style="margin: 0px 0 -10px -120px; cursor: pointer"
                    />
                  </li>
                  <li id="varifyCode">
                    <label for="">
                      <i>*</i>
                      请填写你收到的校验码：
                    </label>
                    <input
                      type="text"
                      class="membership-input w370"
                      name="code"
                      autocomplete="off"
                    />
                    <a href="" class="fsyzm" onclick="send_code()"
                      >获取校验码</a
                    >
                  </li>
                  <li>
                    <label for="">
                      <i>*</i>
                      请输入您的订单编号：
                    </label>
                    <input
                      type="text"
                      class="membership-input w370"
                      name="oid"
                    />
                  </li>
                  <li>
                    <a
                      href=""
                      onclick="javascript:$('form').submit()"
                      class="apply-next"
                      style="display: block; margin: 30px auto 0"
                      >下一步</a
                    >
                  </li>
                </ul>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue"
import MyFooter from "@/components/MyFooter.vue"
export default {
  components: { MyHeader, MyFooter },
}
</script>

<style lang="scss" scoped>
* {
  text-decoration: none;
}
.retrieve-password {
  width: 100%;
  background-color: #f5f5f5;
  padding-bottom: 90px;
}
.w1080 {
  width: 1080px;
  margin: 0 auto;
}
.retrieve-password .step {
  text-align: center;
  padding: 40px 0;
}
.retrieve-password .public-personal {
  margin-bottom: 0;
  
}
.public-personal {
  padding: 20px;
  width: 1038px;
  // height: 400px;
}

.personal-left,
.personal-information,
.member-home,
.myorder,
.footprint,
.exchange-goods,
.public-personal {
  border: 1px solid #e1e1e1;
  box-shadow: 0 0 0 1px #efefef;
  background-color: #fff;
  border-radius: 10px;
}
.retrieve-password .vip-list-con {
  margin-top: 0;
}
.personal-p-title {
  line-height: 40px;
  border-bottom: 1px solid #e2e2e2;
  margin-bottom: 20px;
}
.personal-p-title h2 {
  font-size: 18px;
  font-weight: bold;
}
.vip-list-con ul {
  margin-top: 30px;
}

ol,
ul {
  list-style: none;
}
.vip-list-cons2 li {
  color: #666;
}

.vip-list-con li {
  line-height: 38px;
  margin-bottom: 10px;
}
.retrieve-password.retrieve-password2 .vip-list-con-gl-2 li label {
  width: 200px;
}
.vip-list-con-gl-2 li label {
  color: #666;
}

.vip-list-con li label {
  display: inline-block;
  text-align: right;
}
.vip-list-con li label i {
  display: inline-block;
  color: #e2001c;
  margin-right: 5px;
}
.vip-list-con li select {
  margin: 0 10px;
}
.w370 {
  width: 370px;
}
.membership-input {
  height: 38px;
  border: 1px solid #d1cfc2;
  line-height: 38px;
  padding-left: 5px;
  color: #333;
  margin: 0 10px;
  box-sizing: border-box;
}

.vip-list-cons2 li {
  color: #666;
}

.vip-list-con li {
  line-height: 38px;
  margin-bottom: 10px;
}
.retrieve-password.retrieve-password2 .vip-list-con-gl-2 li label {
  width: 200px;
}
.vip-list-con-gl-2 li label {
  color: #666;
}

.vip-list-con li label {
  display: inline-block;
  text-align: right;
}
.retrieve-password a.fsyzm {
  width: 100px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  background-color: #87c524;
  font-size: 14px;
  display: inline-block;
  border-radius: 15px;
}
.apply-next {
  width: 180px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  border-radius: 25px;
  background-color: #f7941c;
}
</style>
